<template>
  <el-container>
    <app-navbar></app-navbar>
    <el-header>
      <h1>餐厅列表</h1>
    </el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col v-for="restaurant in restaurants" :key="restaurant.id" :span="8">
          <el-card>
            <h4>{{ restaurant.name }}</h4>
            <el-button @click="viewDetails(restaurant.id)">查看详情</el-button>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import AppNavbar from '@/components/AppNavbar.vue'; // 更新导入路径

export default {
  components: {
    AppNavbar,
  },
  data() {
    return {
      restaurants: [
        { id: 1, name: '餐厅A' },
        { id: 2, name: '餐厅B' },
        { id: 3, name: '餐厅C' },
      ],
    };
  },
  methods: {
    viewDetails(id) {
      this.$router.push({ name: 'RestaurantDetail', params: { id } });
    },
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>